<template>
    <div class="tips">
        <div>
            <img src="images/Frame.png" alt="">
        </div>      
        <p class="top">无法访问应用市场</p>
        <p class="middle">请先绑定手机号以注册平台账号，绑定后即可访问</p>
        <button class="btn">去绑定手机号</button>
        <p class="bottom">取消</p>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        
    },
})
</script>
<style lang="less" scoped>
    .tips {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 440px;
        height: 480px;
        background: #FFFFFF;
        box-shadow: 0px 10px 10px rgba(186, 197, 227, 0.3);
        border-radius: 8px;
        img {
            // display: block;
            margin-top:39px;
            width: 200px;
            height: 200px;
        }
        .top {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
            color: #1F2329;
        }
        .middle {
            margin-top: 10px;
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 28px;
            letter-spacing: 0.01em;
            color: #646A73;
        }
        .btn {
            margin:33px 0 25px 0;
            width: 311px;
            height: 48px;
            background: #4C78FC;
            border-radius: 8px;
            border:none;
            font-size: 14px;
            color:#ffffff;
            cursor: pointer;
        }
        .bottom {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #8F959E;
            cursor: pointer;
        }
    }
</style>